<template>
    <div class="base-page">
        <div class="left">
            <select-org @select="onSelectOrg" />
        </div>
        <!-- 物资预算价 -->
        <div class="right" v-show="viewList === true">
            <div class="e-table">
                <div class="top">
                    <div class="left">
                        <div class="left-btn">
                            <el-button size="mini"  @click="buttonAdd()" style="background: #7aa818; color: #fff">新增</el-button>
                            <el-button size="mini"  @click="goTotalPlan()">推送到总计划</el-button>
                        </div>
                    </div>
                    <div class="search_box">
                        <el-input class="ipt" type="text"
                            placeholder="输入搜索关键字"
                            v-model="searchKey"
                            @select="onSearch"
                            @change="onSearch"
                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                        <div class="adverse">
                            <el-button type="primary" @click="onAdvanceSearch">高级搜索</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="e-table" :style="{width: rightTableWidth}">
                <el-table

                    class="table"
                    :height="rightTableHeight"
                    :data="tableData"
                    border
                    :cell-class-name="cellClsNm"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    @selection-change="planTableSelect"
                     ref="table"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
                >
                <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column prop="materialNumber" label="物资编号" min-width="250" show-overflow-tooltip>
                         </el-table-column>
                    <el-table-column prop="materialClassName" label="物资类别" width="150" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="materialName" label="物资名称" width="100" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="spec" label="规格" width="100" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="texture" label="材质" width="100" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="unit" label="单位" width="100" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="budgetPrice" label="预算单价" width="100" show-overflow-tooltip> </el-table-column>
                     <el-table-column prop="isEnable" label="状态" width="100" show-overflow-tooltip>
                         <template slot-scope="{ row  }">
                        {{['停用','启用'][row.isEnable]}}
                         </template>
                         </el-table-column>
                </el-table>
            </div>
            <Pagination
                :total="paginationInfo.total"
                :pageSize.sync="paginationInfo.pageSize"
                :currentPage.sync="paginationInfo.currentPage"
                @currentChange="getTableData"
                @sizeChange="getTableData"
            />
        </div>

    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import SelectOrg from '@/pages/materialsmanagement/materialsPrice/selectOrgName'
import Pagination from '@/components/pagination/pagination'
// eslint-disable-next-line no-unused-vars
import { getmaterialsBudgetPrice, sendToMasterPlan } from '@/api/materials/materialsBudgetPrice'
// eslint-disable-next-line no-unused-vars
import { debounce, advanceSearch, showLoading, hideLoading, selectDataClient, openAppClient } from '@/utils/common'
import { mapState } from 'vuex'
export default {
    components: {
        Pagination,
        SelectOrg
    },
    computed: {
        ...mapState(['userInfo']),
        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 300) + 'px'
        },
        // 列表高度
        rightTableHeight () {
            if (this.paginationInfo.total > 0) {
                return this.screenHeight - 170
            } else {
                return this.screenHeight - 118
            }
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return (this.screenWidth - 300) + 'px'
        },
        rightTableHeight2 () {
            return this.screenHeight - 210
        }

    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            treeData: [],
            currentRow: null,
            paginationInfo: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            },
            tableData: [],
            allData: [],
            formData: {},
            currencyOptions: [],
            tabsName: 'baseInfo',
            tableData2: [],
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            idsTop: [],
            isclick: false, //是否点击
            selection: [],
            billIds: [],
        }
    },
    created () {
        this.getTableData()
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },

    methods: {
        //新增按钮
        buttonAdd () {
            console.log('this.formData', this.formData)
            let isAdd = true
            if(this.isclick) {
                this.isAdd = true
                this.$router.push(
                    {
                        path: '/materialsBudgetPriceAdd',
                        query: {
                            orgId: this.formData.orgId,
                            orgName: this.formData.orgName,
                            isAdd: isAdd,
                        },
                    })
            }else{
                this.clientPop('info', '请先选择组织机构！')
            }

        },
        //获取选择项
        planTableSelect (selection) {
            this.selection = selection
        },
        //推送总计划按钮
        goTotalPlan () {
            if(this.selection.length > 0) {
                //推送
                this.clientPop('info', '确定将最新单价推送到总计划中？', this.push)
            }else {
                this.clientPop('info', '请至少选择一条已启用的数据！')
            }
        },
        //推送
        push () {
            this.selection.forEach(item=>{
                this.billIds.push(item.billId)
            })
            sendToMasterPlan(this.billIds).then(this.clientPop('suc', '推送成功!'))

        },

        handleCurrentChange (val) {

            let isAdd = false

            let  billid = val.billId
            this.$router.push({
                path: '/materialsBudgetPriceAdd',
                query: { billid, isAdd },

            })
        },
        async getTableData () {
            // showLoading()
            try {
                const resData = await getmaterialsBudgetPrice({
                    orgid: this.formData.orgid,
                    materialname: this.formData.materialname,
                    states: [],
                    limit: this.paginationInfo.pageSize,
                    page: this.paginationInfo.currentPage
                })
                console.log('resData', resData.list)
                this.tableData = resData.list
                // this.allData = JSON.parse(JSON.stringify(resData.list))
                // this.paginationInfo.total = resData.totalCount
                // this.viewList = true
                // hideLoading()
            } catch (error) {
                hideLoading()
            }
        },
        async queryTableData () {
            const resData = this.allData.filter(item => {
                return item.userName.includes(this.searchKey)
            })
            this.tableData = resData
            this.paginationInfo.total = 0
        },
        //
        onSelectOrg (val) {
            this.isclick = true
            console.log('orgId>>>>>', val)
            this.formData = {
                ...val,
            }
            this.getTableData()
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        onSearch (e) {
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            console.log(searchKey)
            this.queryTableData()
        },
        onAdvanceSearch () {
            advanceSearch().then(res => {
                alert(JSON.stringify(res))
            })
        },
        goList () {
            this.viewList = true
        },

        // // 点击分配角色按钮
        // async onDistRole () {
        //     this.viewList = 'role'
        //     const data = await getRoleByOrg({
        //         orgId: this.currentRow.orgId,
        //         userId: this.currentRow.userId
        //     })
        //     this.tableData2 = data.filter(item => item.userId)
        // },
        // 选择角色
        // onSelectRole () {
        //     const SelectedIDs = this.tableData2.map(item => item.roleId)
        //     selectDataClient({
        //         SelectServiceToken: '/hr/role/getOrgRole', // 客户端对应方法名
        //         IsSingleMode: false, // 是否单选 true 单选 false 多选
        //         SelectedIDs, // 已选中id
        //         InitParamsStr: JSON.stringify({
        //             orgId: this.currentRow.orgId,
        //             userId: ''
        //         }),
        //         Title: '选择角色' // 标题
        //     }).then(val => {
        //         val.forEach(item => {
        //             console.log('item', item)
        //             // item.userId = this.currentRow.userId
        //             // item.userName = this.currentRow.userName
        //         })
        //         // 保存用户选择返回数据到store
        //         // this.setSelectedInfo(val)
        //         // openAppClient('/showSelectedData', '选择结果')
        //         this.tableData2 = val
        //     })
        // },
        // 保存分配角色
        // async onSave () {
        //     showLoading()
        //     try {
        //         await saveOrgRoleApi({
        //             url: {
        //                 orgId: this.currentRow.orgId,
        //                 userId: this.currentRow.userId,
        //             },
        //             params: this.tableData2
        //         })
        //         hideLoading()
        //         this.clientPop('suc', '保存成功', () => {
        //             this.getTableData()
        //         })
        //     } catch (error) {
        //         hideLoading()
        //     }
        //     this.viewList = true
        // },
        onDel (index) {
            this.tableData2.splice(index, 1)
        },
        onCancel () {
            this.viewList = true
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
    }
}
</script>

<style lang="scss" scoped>
.base-page .left{
    padding: 0px;
}
</style>
